<template>
  <div class="capital-situation">
    <div class="initial-ituation">
      <div class="opening-balance">
        <div class="initial-balance">
          <div class="ending">{{ InitialAmount }}</div>
          <div class="based-on">期初余额（万元）</div>
        </div>
        <div class="initial-balance">
          <div class="endingung">{{ apitalInflow }}</div>
          <div class="based-on">资金流入（万元）</div>
        </div>
        <div class="initial-balance">
          <div class="endingRed">{{ capitalOutflow }}</div>
          <div class="based-on">资金流出（万元）</div>
        </div>
        <div class="initial-balance">
          <div class="ending">{{ numberNum }}</div>
          <div class="based-on">资金余额（万元）</div>
        </div>
      </div>
    </div>
    <div>
      <TotalSales :timeData="mapData" />
    </div>
    <div class="time-inflow">
      <div class="real-time">
        <div class="real-time-title">
          <div class="sooner-rather">实时资金流入</div>
          <div id="digit" v-html="priceFunds"></div>
          <div class="unit-Yuan">元</div>
        </div>
      </div>
      <div class="dynamic">
        <div class="situation-name">
          <div class="text-til">资金安全线</div>
          <div class="ckground-bar"></div>
        </div>
        <div class="dynamic-box">
          <div ref="chinaRegion" id="north-china"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import * as echarts from "echarts";
import gsap from "gsap";
import TotalSales from "./totalSales.vue";
import { digitSymbol, addTags } from "../utils/publicMethods.js";
import { postRequest } from "../utils/request";
const props = defineProps({
  textName: {
    type: String,
    default: "月",
  },
});
watch(
  () => props.textName,
  (newValue, oldValue) => {
    realTimeFunds("年"); //实时资金流入数据请求
    workingCapital(newValue); //流动资金情况
    securityLine(newValue); //资金安全线
    updateMapData(newValue); //地图数据
  }
);
let InitialAmount = ref(0); //起初金额
let apitalInflow = ref(0); //资金流入
let capitalOutflow = ref(0); //资金流出
let numberNum = ref(0); //余额
let chinaRegion = ref(null);
let priceFunds = ref(0);
let amount2 = 0;
let previousStr = amount2.toFixed(2); // 初始值字符串
let mapData = ref([]);

let chinaChart = (dat) => {
  let barWidth = 46;
  let myData1 = ["华中区", "华南区", "华北区", "西南区", "华北区"];
  let syjcl = dat;
  let dbyp = [50, 50, 50, 50, 50];
  let option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
      textStyle: {
        color: "#fff",
      },
      backgroundColor: "#0d62eca9", //设置背景颜色
      borderColor: "rgba(255, 255, 255, 0)",
      confine: true,
      formatter: "{b}: {c}%",
    },
    grid: {
      top: "10%",
      left: "2%",
      right: "2%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: myData1,
      axisPointer: {
        type: "shadow",
      },
      axisLabel: {
        color: "#fff",
        interval: 0,
        fontSize: "14px",
        align: "center",
        margin: 8,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(127, 214, 255, .4)",
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        type: "value",
        // name: "亿元",
        splitNumber: 4,
        nameTextStyle: {
          color: "#fff",
          fontSize: "14px",
          align: "center",
          padding: [0, 28, 4, 0],
        },
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            fontSize: "14px",
            color: "#fff",
            lineHeight: 16,
          },
        },
        axisTick: {
          // show: false,
          show: true,
          interval: 10, // 每 10 个单位显示一个刻度
        },
        splitNumber: 5,
        splitLine: {
          show: true,
          lineStyle: {
            color: ["#ccc", "red", "#ccc", "#ccc", "#ccc"], //X轴线颜色
          },
        },
      },
    ],
    series: [
      {
        //下半截柱状图
        name: "2020",
        type: "bar",
        barWidth: barWidth,
        barGap: "-100%",
        itemStyle: {
          opacity: 0.9,
          color: function (params) {
            if (params.value < 10) {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "#E96693", // 0% 处的颜色（绿色）
                  },
                  {
                    offset: 0.6,
                    color: "#DF529D", // 0% 处的颜色（绿色）
                  },
                  {
                    offset: 1,
                    color: "#A87ECE", // 100% 处的颜色（绿色）
                  },
                ],
                false
              );
            } else {
              return new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  {
                    offset: 0,
                    color: "#3BBDB8", // 0% 处的颜色（绿色）
                  },
                  {
                    offset: 0.8,
                    color: "#144649", // 0% 处的颜色（绿色）
                  },
                  {
                    offset: 1,
                    color: "#2A7074", // 100% 处的颜色（绿色）
                  },
                ],
                false
              );
            }
          },
        },
        label: {
          normal: {
            show: true,
            position: "top",
            formatter: (e) => {
              return e.value + "%";
            },
            fontSize: "14px",
            color: "#fff",
            fontFamily: "siyuan",
            fontWeight: "bold",
            offset: [0, -5],
          },
        },
        data: syjcl,
      },
      {
        // 替代柱状图 默认不显示颜色，是最下方柱图（邮件营销）的value值 - 20
        type: "bar",
        barWidth: barWidth,
        barGap: "-100%",
        stack: "广告",
        itemStyle: {
          color: "transparent",
        },
        data: syjcl,
      },
      {
        // 最大值，顶部圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [barWidth, barWidth / 2],
        symbolOffset: [0, -barWidth / 4],
        z: 12,
        symbolPosition: "end",
        itemStyle: {
          color: "rgba(177, 215, 255, 0.5)",
          opacity: 1,
        },
        data: dbyp,
      },
      {
        // 中间圆片
        name: "",
        type: "pictorialBar",
        symbolSize: [barWidth, barWidth / 2],
        symbolOffset: [0, -barWidth / 4],
        z: 12,
        itemStyle: {
          opacity: 1,
          // color: "rgba(177, 215, 255, 1)",
          color: function (params) {
            if (params.value < 10) {
              return "#f29eb6";
            } else {
              return "#77bab9";
            }
          },
        },
        symbolPosition: "end",
        data: syjcl,
      },
      {
        // 背景柱体
        name: "2019",
        type: "bar",
        barWidth: barWidth,
        barGap: "-100%",
        z: 0,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              {
                offset: 0,
                color: "rgba(81, 175, 255, 1)", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(0, 64, 124, 1)", // 100% 处的颜色
              },
            ],
            false
          ),
          opacity: 0.2,
        },
        data: dbyp,
      },
    ],
  };

  const chart = echarts.init(chinaRegion.value);
  chart.setOption(option);
};

let inflowAndOutflow = (num, Initialt) => {
  //资金流入流出动画
  gsap.to(Initialt, {
    duration: 5,
    value: num,
    snap: "value",
    ease: "power3.inOut",
    onComplete: () => {
      Initialt.value = parseFloat(num) > 0 ? num : 0;
    },
  });
};
let timeFunding = () => {
  //处理实时资金的值
  let fundValie = digitSymbol(amount2);
  priceFunds.value = addTags(fundValie);
};

let realTimeFunds = () => {
  postRequest("/screen/query/getCwSszjlr", "年")
    .then(({ code, data: { sszjlr } }) => {
      if (code == 200) {
        amount2 = sszjlr;
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};

let workingCapital = (timert) => {
  postRequest("/screen/query/getCwZjldqk", timert)
    .then(({ code, data }) => {
      if (code == 200 && data != null) {
        inflowAndOutflow(
          parseFloat(data.qcye) > 0 ? data.qcye : 0,
          InitialAmount
        ); //资金流入流出动画
        inflowAndOutflow(
          parseFloat(data.zjlr) > 0 ? data.zjlr : 0,
          apitalInflow
        ); //资金流入流出动画
        inflowAndOutflow(
          parseFloat(data.zjlc) > 0 ? data.zjlc : 0,
          capitalOutflow
        ); //资金流出动画
        inflowAndOutflow(parseFloat(data.zjye) > 0 ? data.zjye : 0, numberNum); //资金流出动画
      } else {
        inflowAndOutflow(0, InitialAmount); //资金流入流出动画
        inflowAndOutflow(0, apitalInflow); //资金流入流出动画
        inflowAndOutflow(0, capitalOutflow); //资金流出动画
        inflowAndOutflow(0, numberNum); //资金流出动画
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};
let securityLine = (timert) => {
  postRequest("/screen/query/getCwZjldqkZjaqxQy", timert)
    .then(({ code, data }) => {
      if (code == 200 && data && data.length > 0) {
        let dat = [];
        data.forEach((item) => {
          dat.push(item.zjaqx);
        });
        chinaChart(dat); //资金安全线
      } else {
        chinaChart([0, 0, 0, 0, 0]); //资金安全线
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};
let updateMapData = (timert) => {
  postRequest("/screen/query/getCwZjldqkQy", timert)
    .then(({ code, data }) => {
      if (code == 200 && data) {
        mapData.value = data;
      } else {
        mapData.value = [
          { name: "华南区" },
          { name: "西南区" },
          { name: "华中区" },
          { name: "华北区" },
          { name: "华东区" },
        ];
      }
    })
    .catch((error) => {
      console.error("请求失败:", error);
    });
};

onMounted(() => {
  realTimeFunds(props.textName); //实时资金流入数据请求
  workingCapital(props.textName); //流动资金情况
  securityLine(props.textName); //资金安全线

  updateMapData(props.textName); //地图数据

  let changedIndexes = [];
  setInterval(() => {
    const newValue = Number(amount2.toFixed(2)) + 1;
    const newStr = newValue.toFixed(2); // 新值字符串
    changedIndexes = [];
    for (let i = 0; i < Math.max(previousStr.length, newStr.length); i++) {
      if (previousStr[i] !== newStr[i]) {
        changedIndexes.push(i); // 记录变化的下标
      }
    }
    previousStr = newStr; // 更新旧值字符串
    amount2 = newValue;
    timeFunding(); //实时金额翻转动画
  }, 2000);

  setInterval(() => {
    let digitsDa = document.querySelectorAll(".first");
    changedIndexes.forEach((index) => {
      gsap.to(digitsDa[index], {
        rotationX: "360",
        duration: 0.8,
        ease: "power2.out",
      });
    });
  }, 2000);
});
</script>
<style lang="less" scoped>
.capital-situation {
  width: 39vw;
  height: 90vh;
  .initial-ituation {
    height: 9vh;
    width: 39vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0 0.1vw;
    margin-top: 4.6vh;
    .opening-balance {
      width: 100%;
      height: 8vh;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .initial-balance {
        flex: 1;
        height: 100%;
        background: #2098cc25;
        border: 1px solid #588ec35d;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin: 0 0.2vw;
        font-family: Dream Han Sans CN;
        font-weight: normal;
        color: #ffffff;
        .based-on {
          font-size: 0.79vw;
          margin-left: 0.4vw;
        }
        .ending {
          color: #71d2ff;
          font-size: 1.4vw;
          text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
          opacity: 0.97;
          padding: 0.4vh 0;
          margin-top: 0.5vh;
          font-weight: 600;
        }
        .endingung {
          color: #5aff7d;
          font-size: 1.4vw;
          text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
          opacity: 0.97;
          padding: 0.4vh 0;
          margin-top: 0.5vh;
          font-weight: 600;
        }
        .endingRed {
          color: #ff4302;
          font-size: 1.4vw;
          text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
          opacity: 0.97;
          padding: 0.4vh 0;
          margin-top: 0.5vh;
          font-weight: 600;
        }
      }
    }
  }
  .time-inflow {
    width: 100%;
    height: 32.5vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .real-time {
      width: 90%;
      height: 10vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .real-time-title {
        width: 100%;
        height: 6vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-family: Dream Han Sans CN;
        font-weight: normal;
        text-shadow: 0px 3px 7px rgba(1, 4, 8, 0.66);
        opacity: 0.97;
        color: #ffffff;
        transform: translateY(-0.3vh);
        #digit {
          width: 26vw;
          height: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // background-color: #8fc2e93d;
          // border-radius: 12px;
        }
        #digit ::v-deep .first {
          width: 3.2vw;
          height: 6vh;
          background: url("../assets/bort.png") no-repeat;
          background-size: 100% 100%;
          background-position: center;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 2.2vw;
          padding-bottom: 0.75vh;
          margin: 0 0.1vw;
          transform-style: preserve-3d;
        }
        #digit ::v-deep .symbol {
          width: 1vw;
          height: 6vh;
          opacity: 0.97;
          font-size: 1.3vw;
          display: flex;
          justify-content: center;
          align-items: flex-end;
        }
        .sooner-rather {
          width: 7vw;
          height: 100%;
          font-size: 1.1vw;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;
          font-weight: 700;
        }
        .unit-Yuan {
          width: 1vw;
          height: 100%;
          font-size: 0.7vw;
          display: flex;
          align-items: self-end;
          justify-content: flex-end;
        }
      }
    }
    .dynamic {
      width: 100%;
      height: 22vh;
      overflow: hidden;

      .dynamic-box {
        width: 100%;
        height: 19vh;
        background: #2098cc33;
        #north-china {
          width: 98%;
          height: 18.5vh;
          border-radius: 6px;
          margin-left: 1%;
        }
      }
    }
  }
  .situation-name {
    width: 100%;
    height: 3.6vh;
    font-family: DreamHanSansCN, DreamHanSansCN;
    font-weight: 500;
    font-size: 1.1vw;
    color: #ffffff;
    text-align: left;
    font-style: normal;
    text-transform: none;
    transform: translateY(-0.9vh);
    .text-til {
      width: 100%;
      transform: translateY(0.7vh);
      padding-left: 0.5vw;
    }
    .ckground-bar {
      height: 1.3vh;
      width: 100%;
      background: url("../assets/biao.png") no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
  }
}
</style>
